import React, { Component } from 'react'
import DepartmentList from './_base/DepartmentList'
import { connect } from 'react-redux'
import {
  addDepartmentAsync,
  deleteDepartmentAsync,
  getDepartmentAsync,
  getDepartmentListAsync, updateDepartmentAsync
} from '../../../_redux/actions_async'
import AddDepartmentForm from './_base/AddDepartmentForm'
import { PageHeader, Descriptions, Button } from 'antd'

class AdminDepartmentPage extends Component {
  constructor (props) {
    super(props)
  }

  componentDidMount () {
    console.log('componentDidMount ()')
    let departmentId = this.props.match.params.departmentId
    this.props.getDepartmentListAsync(departmentId)
    this.props.getDepartmentAsync(departmentId)
  }

  handleFinish = e => {
    let { option, name, phone, place } = e
    let departmentId = this.props.match.params.departmentId
    let { parentId } = this.props.currentDepartment
    if (option === 1) {
      this.props.addDepartmentAsync({ ...e, parentId: departmentId })
    } else if (option === 0) {
      this.props.updateDepartmentAsync({  ...e, id: departmentId, parentId })
    }
  }

  handleDeleteDepartment = id => {
    this.props.deleteDepartmentAsync(id)
  }

  handleUpdate = () => {

  }

  render () {
    const { name, phone, place, parentId, time } = this.props.currentDepartment
    return (
      <div style={{ padding: 20 }}>
        <Descriptions title="当前部门">
          <Descriptions.Item label="名称">{name}</Descriptions.Item>
          <Descriptions.Item label="电话">{phone}</Descriptions.Item>
          <Descriptions.Item label="地点">{place}</Descriptions.Item>
          <Descriptions.Item label="成立时间">{time}</Descriptions.Item>
        </Descriptions>
        <AddDepartmentForm onFinish={this.handleFinish}/>
        <DepartmentList handleDelete={this.handleDeleteDepartment} departmentList={this.props.departmentList}/>
      </div>
    )
  }
}

AdminDepartmentPage.propTypes = {}

AdminDepartmentPage = connect(
  ({ $AdminPageState: { departmentList, currentDepartment } }) => ({ departmentList, currentDepartment }),
  { getDepartmentListAsync, addDepartmentAsync, getDepartmentAsync, deleteDepartmentAsync, updateDepartmentAsync }
)(AdminDepartmentPage)

export default AdminDepartmentPage
